<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 添加分类 -->
        <el-button type="success" plain @click='showAddcategories'>添加分类</el-button>
        <!-- 分类类别详细显示 -->
        <tree-grid :treeStructure="true" :columns="columns" :data-source="dataSource" @deleteCate="deleteCategory" @editCate="editCategory">
        </tree-grid>
        <!-- 添加分类框 -->
        <el-dialog title="添加商品分类" :visible.sync="adddialogFormVisible">
            <el-form :model="addform" ref="addform">
                <el-form-item label="分类名称" label-width="80px" >
                    <el-input v-model="addform.cat_name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级名称" label-width="80px" >
                    <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" :props="props">
                </el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="adddialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addsubmitForm('addform')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getcategoriesList, addcategories } from '@/api/index.js'
// 引入自定义组件--分类类别
import TreeGrid from '@/components/TreeGrid/TreeGrid.vue'
export default {
  data () {
    return {
      // 分类列表数据
      dataSource: [],
      columns: [
        {
          text: '分类名称',
          dataIndex: 'cat_name',
          width: ''
        },
        {
          text: '是否有效',
          dataIndex: 'cat_deleted',
          width: ''
        },
        {
          text: '排序',
          dataIndex: 'cat_level',
          width: ''
        }
      ],
      //   添加分类选择框数组
      options: [],
      //   添加分类选择框选中的分类id存储数组
      selectedOptions: [],
      //   添加分类框
      adddialogFormVisible: false,
      //   添加分类框对象
      addform: {
        // 分类ID
        cat_id: '',
        // 分类名称
        cat_name: '',
        // 分类父ID
        cat_pid: '',
        // 分类当前层级
        cat_level: ''
      },
      //   设置此对象，关联对应属性，才能最终显示出选择框的内容
      props: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      }
    }
  },
  // 通过components属性可以来注入你想使用的组件
  components: {
    'tree-grid': TreeGrid
  },
  mounted () {
    // 渲染列表
    this.initList()
  },
  methods: {
    deleteCategory (cid) {
      console.log(cid)
    },
    editCategory (cid) {
      console.log(cid)
    },
    // 显示添加分类框
    showAddcategories () {
      this.adddialogFormVisible = true
      getcategoriesList(2).then((res) => {
        // 赋值给添加分类选择框数组
        this.options = res.data
      })
    },
    // 添加分类
    addsubmitForm () {
      // 判断添加分类选择框选中的分类id存储数组长度来定义是添加第几类分类
      if (this.selectedOptions.length === 0) {
        // 当长度为0，表示添加的分类是1级，赋值分类父ID,分类层级
        this.addform.cat_pid = 0
        this.addform.cat_level = 0
      } else if (this.selectedOptions.length === 1) {
        this.addform.cat_level = 1
        // 赋值分类父ID，只要最后一个夫id就可以
        this.addform.cat_pid = this.selectedOptions[0]
      } else if (this.selectedOptions.length === 2) {
        this.addform.cat_level = 2
        // 赋值分类父ID，只要最后一个夫id就可以
        this.addform.cat_pid = this.selectedOptions[1]
      }
      // 发送添加分类请求
      addcategories(this.addform).then((res) => {
        // console.log(res)
        if (res.meta.status === 201) {
          // 提示用户添加成功
          this.$message({
            type: 'success',
            message: res.meta.msg
          })
        } else {
          this.$message({
            type: 'error',
            message: res.meta.msg
          })
        }
        this.adddialogFormVisible = false
        // 刷新
        this.initList()
        this.addform.cat_name = ''
      })
    },
    handleChange () {},
    // 分类渲染
    initList () {
      // 发送请求， 获取分类列表数据，渲染页面
      getcategoriesList(3).then(res => {
      // console.log(res)
        if (res.meta.status === 200) {
        // 赋值给分类列表数组
          this.dataSource = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>
